﻿@model SearchBoxModel
@using Nop.Web.Models.Catalog;

<h2>Search</h2>
<a title="close search" id="close-search" href="#"><span class="icon-cancel"></span></a>

@using (Html.BeginRouteForm("ProductSearch", FormMethod.Get, new { onsubmit = "return check_small_search_form()" }))
{    
    <div class="input-control text no-phone no-tablet-portrait no-desktop on-large">
        <input type="text" class="search-box-text" id="small-searchterms" @(Model.AutoCompleteEnabled ? Html.Raw(" autocomplete=\"off\"") : null) placeholder="@T("Search.SearchBox.Tooltip")" name="q" />
        <button type="submit" class="btn-search"></button>
    </div>
    
    <ul id="search-autocomplete"></ul>
    
    <script type="text/javascript">
        function check_small_search_form() {
            var search_terms = $("#small-searchterms");
            if (search_terms.val() == "") {
                alert('@Html.Raw(HttpUtility.JavaScriptStringEncode(T("Search.EnterSearchTerms").Text))');
                search_terms.focus();
                return false;
            }

            return true;
        }
            @if (Model.AutoCompleteEnabled)
            {
                <text>
                $(function () {
                    $('#small-searchterms').autocomplete({
                        delay: 500,
                        minLength: @(Model.SearchTermMinimumLength.ToString()),
                        source: '@(Url.RouteUrl("ProductSearchAutoComplete"))',
                        appendTo: $('#search-autocomplete'),
                        select: function( event, ui ) {
                            $("#small-searchterms").val(ui.item.label);
                            setLocation(ui.item.producturl);
                            return false;
                        }
                    })

                    .data("ui-autocomplete")._renderItem = function( ul, item ) {
                        var t = item.label;
                        //html encode
                        t = htmlEncode(t);
                        return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append("<a>@(Model.ShowProductImagesInSearchAutoComplete ? Html.Raw("<img src='\" + item.productpictureurl + \"'>") : null)" + t + "</a>")
                        .appendTo(ul);
                    };
                });
                </text>
            }
    </script>
    @Html.Widget("searchbox")
}